<template>
    <div class="top">
        <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect"  >
    <div class="store">
        <el-menu-item index="1" class="storeName" >
            <el-tooltip style="width:100px;overflow:hidden;" class="item2" effect="dark" :content="storeName" placement="bottom">
                <span>{{ storeName }}</span>
            </el-tooltip>
        </el-menu-item>
        <el-tooltip  effect="dark" content="折叠" placement="bottom">
            <el-menu-item index="5" v-if="!this.$store.state.isCollapse">
                <i class="el-icon-s-fold"></i>
            </el-menu-item>
        </el-tooltip>
        <el-tooltip  effect="dark" content="展开" placement="bottom" >
            <el-menu-item index="6" v-if="this.$store.state.isCollapse">
                <i class="el-icon-s-unfold"></i>
            </el-menu-item>
        </el-tooltip>
        <el-menu-item index="2" class="status" v-if="storeId!=0">
            <span style="font-size: 16px; font-weight:800;color:#808080" >{{ storeStatus==0 ? status0:status1}}</span>
        </el-menu-item>
        <el-menu-item index="3" class="status" v-else>
            <span style="font-size: 16px; font-weight:800;color:#808080">admin</span>
        </el-menu-item>
    </div>

    <div class="a-t">
        <!-- v-image-preview -->
        <img    class="avatar-image" :src='$store.state.user.userInfo.avatar' alt="用户头像"  v-image-preview>
        <el-menu-item index="3" class="avatar" >
        
        <el-tooltip style="width:70px;overflow:hidden;" class="item" effect="dark" :content="$store.state.user.userInfo.username" placement="bottom">
            <span style="text-align: left;">{{ $store.state.user.userInfo.username }}</span>
        </el-tooltip>
        </el-menu-item>

        <el-menu-item index="4" class="exit" >
            <el-button type="danger" icon="el-icon-s-promotion" size="small" >退出</el-button>
        </el-menu-item>
    </div>
    

  </el-menu>
    </div>

</template>

<script>
import {queryById,updateStore} from '@/api/store'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    components:{
        elImageViewer
    },
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        storeName:'',
        storeAvatar:'',
        storeStatus:0,
        storeId:0,
        status0:'已打烊',
        status1:'营业中',
        // user:this.$store.state.user.userInfo
      };
    },
    created(){// 执行一些数据初始化、事件监听等逻辑
        console.log(this.$store.state.user.userInfo)
        this.storeId = this.$store.state.user.userInfo.storeId
        const that = this
        if(this.storeId==0){
            this.storeName = '管理员'
        }else{
            const store = queryById(this.storeId)
            store.then((res)=>{
                that.storeName = res.data.name
                that.storeStatus = res.data.status
                console.log(res)
            })
        }
    },
    mounted(){// 执行一些需要依赖DOM元素的逻辑，如获取元素尺寸、绑定事件、设置定时器等

    },
    methods: {

      handleSelect(key, keyPath) {
        // console.log(key)
        switch(key){
            case '1':
                //查看商店详情
                this.$store.state.menu_active = 8;
                this.$router.push('/home/storeInfo')
                break;
            case '2':
                //修改店铺状态
                this.updateStatus()
                break;
            case '3':
                //查看个人信息
                this.$store.state.menu_active = 9;
                this.$router.push('/home/userInfo')
                break;
            case '4':
                //退出
                this.exit();
                break;
            case '5':
                this.$store.state.isCollapse = true
                console.log( this.$store.state.isCollapse)
                break
            case '6':
                this.$store.state.isCollapse = false
                console.log( this.$store.state.isCollapse)
                break
            default:
                console.log(key+"啥也没发生")
        }
        // console.log(key, keyPath);
      },
      exit(){
        this.$confirm('是否退出?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$store.commit('user/removeUserInfo')
            this.$router.go(0)
            this.$message({
                type: 'success',
                message: '退出成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
      },
      updateStatus(){
        // this.storeStatus = this.storeStatus == 0? 1: 0;
        const that = this
        const store = {
            id:this.storeId,
            status:this.storeStatus
        }
        this.$confirm('是否更改店铺状态？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            store.status = store.status == 0? 1:0
            this.storeStatus = store.status
            updateStore(store)
            // this.$router.go(0)
            this.$message({
                type: 'success',
                message: '更改成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        
      }
    }
}
</script>

<style scoped>
.top{
    width: 100%;
    /* background-color:#FEC202; */
}




.item{
    display: flex;
    align-items: center; 
}

.item2{
    display: flex;
    align-items: center; 
}

.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100px;
  }

span{
    font-weight: bolder;
    font-size:18px; 
    margin-left:10px;
    color: #2f2b2b;
}

.avatar-image{
    border-radius: 50%;
    /* width: 50%; */
    /* height: 80%;
    width: 80%; */
    height: 50px;
    width: 50px;
    border: 1px;
    border-style:solid;
    border-color:cadetblue;
    object-fit: cover ;
    /* z-index: 99999999999999999999999999999; */
}


.avatar-image:hover {
    transform: translate(-50%,50%) scale(1.8);
    animation: la 0.5s;
}


/* .avatar-image :hover{
    transform-origin: -25% 75%;
} */




.el-menu-demo{
    display: flex;
    /* background-color:#FDB70A; */
    background-color: #66ccf4;
    background-color:#93c7ff;
    /* justify-content:space-between; */
}

.avatar{
    /* margin-left: 930px; */
    /* margin-left: 1320px; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0 10px;
}

@keyframes la {
    0% {
        transform: translate(0,0) scale(1.0);
    }

    100% {
        transform: translate(-50%,50%) scale(1.8);
    }
}

.store{
    display: flex;
    
}

.a-t{
    display: flex;
    margin-left: auto;
}
</style>